<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title%></title>
    <link rel="SHORTCUT ICON" href="/img/html_head.png">
    <link rel="stylesheet" type="text/css" href="/css/home-blog.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">

    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script src="/libs/axios/axios.min.js"></script>
    <style type="text/css">
        #album-list{
            display: none;
            /*position: absolute;*/
            /*left: 10px;*/
            /*top: 5px;*/
            /*z-index: -1;*/
        }
        .form{
            width: 70%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!--  页头  -->
    <%- include('../home/header.html') -%>
    <form class="form pure-form">
        <fieldset>
            <legend style="display: flex;justify-content: space-between;border-top: 1px solid #e5e5e5;border-bottom:none;">
                <span>新建相册</span>
                <a class="btn-small" href="/home/album.html">返回主页</a>
            </legend>
            <input type="hidden" id="album-id" name="hidden-value" value=""/>
        </fieldset>
        <fieldset>
            <div class="row">
                <label for="title">标题：</label>
                <input id="title" type="text" aria-colspan="100" name="title" placeholder="相册标题"/>
            </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <label for="content">相册内容：</label>
                <textarea id="content" type="text" cols="100" rows="4" name="content" placeholder="相册内容"></textarea>
            </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <label for="description">描述：</label>
                <textarea id="description" type="text" cols="100" rows="4" name="description" placeholder="相册描述"></textarea>
            </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <label for="address">相册地址：</label>
                <input id="address" type="text" name="address" placeholder="相册地址"/>
            </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <label for="album-list"></label>
                <div class="upload-component" style="display: flex;">
                    <input id="album-list" type="file" name="album-list" multiple="multiple" onchange="getFileList(event)"/>
                    <div class="btn-upload" onclick="getElementById('album-list').click()">
                         <div class="icon-upload" ></div>
                    </div>
                    <p class="upload-info">
                        <span class="tips">只支持上传图片类型</span>
                        <span class="tips">支持png,jpg,gif,jpeg,webp,jiff等格式</span>
                        <span class="tips">图片最大不能超过2M</span>
                    </p>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <label></label>
                <div class="section-album-list"></div>
            </div>
        </fieldset>
        <fieldset>
            <div class="row">
                <label></label>
                <div class="btn pure-button pure-button-primary">提交保存</div>
            </div>
        </fieldset>
    </form>
<!--    隐藏-->
    <!--
    <form action="/home/upload" enctype="multipart/form-data"  method="post">
        <input type="file" name="headImg" multiple="multiple">
        <input type="submit" value="提交">
    </form>
    -->
    <!-- 页脚-->
    <%- include('../home/footer.html'); -%>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript">
        /**
         * 获取选择的文件
         * @param ev
         */
        function getFileList(ev){
            ev = ev || event
            const target = ev.currentTarget || ev.srcElement
            const files = target.files;
            const albumList = document.querySelector(".section-album-list")
            albumList.style.display = 'grid'
            for (let i = 0,len = files.length; i < len; i++) {
                const url = window.URL.createObjectURL(files[i]);
                const img = document.createElement("img")
                img.src = url
                albumList.appendChild(img)
            }
        }

        const form = document.querySelector(".form")
        const elAlbumId = form.querySelector("#album-id")
        const title = form.querySelector("#title")
        const content = form.querySelector("#content")
        const description = form.querySelector("#description")
        const address = form.querySelector("#address")
        const elAlbumList = form.querySelector("#album-list")
        const btn = form.querySelector(".btn")
        btn.onclick = function () {
            debugger
            console.log("elAlbumList",elAlbumList)
            console.log("elAlbumList.value：",elAlbumList.value)
            console.log("elAlbumList.files：",elAlbumList.files)
            const albumFileList = Array.from(elAlbumList.files)
            console.log("albumImagesList:",albumFileList)
            const formdata = new FormData()
            formdata.append("title",title.value)
            formdata.append("content",content.value)
            formdata.append("description",description.value)
            formdata.append("address",address.value)
            formdata.append("createTime",new Date())
            albumFileList.forEach(file => {
                console.log("file:",file)
                formdata.append("album",file,file.name)
            })
            if (title.value.trim() === ""){
                alert("标题不能为空!")
            } else if(content.value.trim() === "") {
                alert("相册内容不能为空")
            } else if(description.value.trim() === "") {
                alert("相册描述不能为空")
            } else if(address.value.trim() === "") {
                alert("相册地址不能为空")
            } else if(elAlbumList.value === "") {
                alert("请选择相册图片！！！")
            } else if (elAlbumId.value === ""){
                axios.post("/home/upload-album.do",formdata,{
                    'Content-Type':'multipart/form-data'
                }).then(res => {
                    console.log("res:",res)
                    const {data:{code,data:{id},message}} = res
                    if (code === 200) {
                        alert(message)
                        elAlbumId.value = id
                    }
                })
            } else {
                axios.post(`/home/update-album.do/`,formdata,{
                    'Content-Type':'multipart/form-data'
                }).then(res => {
                    console.log("res:",res)
                    const {data:{code,message}} = res
                    if (code === 200) {
                        alert(message)
                    }
                })
            }
        }
    </script>
</body>
</html>
